<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console1.css') }}"/>
</head>
<body class="pear-container">
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-header">
            心率信息
        </div>
        <div class="layui-card-body" style="padding: 25px;">
            <form class="layui-form" action="">
                <div class="main-container">
                    <div id="heart" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">
            压力信息
        </div>
        <div class="layui-card-body" style="padding: 25px;">
            <form class="layui-form" action="">
                <div class="main-container">
                    <div id="pressure" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">
            呼吸信息
        </div>
        <div class="layui-card-body" style="padding: 25px;">
            <form class="layui-form" action="">
                <div class="main-container">
                    <div id="breathe" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">
            血氧信息
        </div>
        <div class="layui-card-body" style="padding: 25px;">
            <form class="layui-form" action="">
                <div class="main-container">
                    <div id="oxygen" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
                </div>
            </form>
        </div>
    </div>
</div>

{% include 'admin/common/footer.html' %}
</body>
<script>
    layui.use(['layer', 'echarts', 'element', 'count'], function () {
        let $ = layui.jquery

        var heartCharm = echarts.init($('#heart')[0]);
        var pressureCharm = echarts.init($('#pressure')[0])
        var breatheCharm = echarts.init($('#breathe')[0])
        var oxygenCharm = echarts.init($('#oxygen')[0])
        var option_heart;
        var option_pressure;
        var option_breathe;
        var option_oxygen;
        data = []
        {% for record in records %}
            data.push({{ record|tojson }})
        {% endfor %}
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        var hearts = []
        var heart_max = 0
        var heart_min = 1000

        var pressures = []
        var pressure_max = 0
        var pressure_min = 10000

        var breathes = []
        var breathe_max = 0
        var breathe_min = 1000

        var oxygens = []
        var oxygen_max = 0
        var oxygen_min = 10000

        var times = []


        for (var i = 0; i < data.length; i++) {
            heart_max = heart_max > data[i]['heart'] ? heart_max : data[i]['heart'];
            heart_min = heart_min < data[i]['heart'] ? heart_max : data[i]['heart'];
            hearts.push(parseInt(data[i]['heart']))

            pressure_max = heart_max > data[i]['pressure'] ? heart_max : data[i]['pressure'];
            pressure_min = heart_min < data[i]['pressure'] ? heart_max : data[i]['pressure'];
            pressures.push(data[i]['pressure'])

            breathe_max = breathe_max > data[i]['breathe'] ? breathe_max : data[i]['breathe'];
            breathe_min = breathe_min < data[i]['breathe'] ? breathe_max : data[i]['breathe'];
            breathes.push(data[i]['breathe'])

            oxygen_max = oxygen_max > data[i]['oxygen'] ? oxygen_max : data[i]['oxygen'];
            oxygen_min = oxygen_min < data[i]['oxygen'] ? oxygen_max : data[i]['oxygen'];
            oxygens.push(data[i]['oxygen'])
            var time1 = data[i]['date'].slice(data[i]['date'].indexOf('T') + 1)
            if (time1.indexOf('.') != -1) {
                times.push(time1.slice(0, time1.indexOf('.')))
            } else {
                times.push(time1)
            }
        }

        option_heart = {
            backgroundColor: "#fff",
            color: color,
            title: {
                text: '心率'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['心率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin: 3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: times
            }],
            yAxis: {
                type: 'value',
                data: [{
                    type: 'value',
                    name: '心率',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[3]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}次/分'
                    }
                },]
            },
            series: [
                {
                    name: '心率',
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    zlevel: 3,
                    itemStyle: {
                        color: 'red',  // 小圆圈的填充色
                        borderColor: 'blue',  // 小圆圈的边框色
                        borderWidth: 2  // 小圆圈的边框宽度
                    },
                    lineStyle: {
                        normal: {
                            color: color[3],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[3], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    data: hearts
                },
            ]
        };

        option_pressure = {
            backgroundColor: "#fff",
            color: color,
            title: {
                text: '压力'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['压力']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin: 3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: times
            }],
            yAxis: {
                type: 'value',
                data: [{
                    type: 'value',
                    name: '压力',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}次/分'
                    }
                },]
            },
            series: [
                {
                    name: '心率',
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    zlevel: 3,
                    itemStyle: {
                        color: color[1],  // 小圆圈的填充色
                        borderColor: 'blue',  // 小圆圈的边框色
                        borderWidth: 2  // 小圆圈的边框宽度
                    },
                    lineStyle: {
                        normal: {
                            color: color[1],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[1], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    data: pressures
                },
            ]
        };

        option_breathe = {
            backgroundColor: "#fff",
            color: color,
            title: {
                text: '呼吸'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['呼吸']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin: 3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: times
            }],
            yAxis: {
                type: 'value',
                data: [{
                    type: 'value',
                    name: '呼吸',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}次/分'
                    }
                },]
            },
            series: [
                {
                    name: '呼吸',
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    zlevel: 3,
                    itemStyle: {
                        color: color[0],  // 小圆圈的填充色
                        borderColor: 'blue',  // 小圆圈的边框色
                        borderWidth: 2  // 小圆圈的边框宽度
                    },
                    lineStyle: {
                        normal: {
                            color: color[0],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[0], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    data: breathes
                },
            ]
        };

        option_oxygen = {
            backgroundColor: "#fff",
            color: color,
            title: {
                text: '血氧'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['血氧']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: [{
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: "#333"
                    }
                },
                axisLine: {
                    margin: 3,
                    lineStyle: {
                        color: "#D9D9D9"
                    }
                },
                data: times
            }],
            yAxis: {
                type: 'value',
                min: 80,
                max: 100,
                data: [{
                    type: 'value',
                    name: '血氧',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: color[5]
                        }
                    },
                    axisLabel: {
                        formatter: '{value}次/分'
                    }
                },]
            },
            series: [
                {
                    name: '血氧',
                    type: "line",
                    smooth: true,
                    symbolSize: 8,
                    itemStyle: {
                        color: color[5],  // 小圆圈的填充色
                        borderColor: 'blue',  // 小圆圈的边框色
                        borderWidth: 2  // 小圆圈的边框宽度
                    },
                    lineStyle: {
                        normal: {
                            color: color[5],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[5], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    data: oxygens
                },
            ]
        };


        option_heart && heartCharm.setOption(option_heart)
        option_pressure && pressureCharm.setOption(option_pressure)
        option_breathe && breatheCharm.setOption(option_breathe)
        option_oxygen && oxygenCharm.setOption(option_oxygen)

    })

    const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
            rgbaColor =
                `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                    "0x" + hex.slice(3, 5)
                )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
    }
</script>

</html>